<template>
	<view class="questionnaire">
		<view class="progress-box">
			<view class="p-b-left">
				<view class="cu-progress qn round">
					<view class="bg-orange" :style="[{ width:true? handleProgress+'%':''}]"></view>
				</view>
			</view>
			<view class="p-b-right">
				<text class="margin-left">{{checkList.length}}/{{questionList.length}}</text>
			</view>
		</view>
		<transition-group name="slide-fade">
			<qn-card :List="questionList" @handleChange="handleChange"></qn-card>
		</transition-group>
		<view class="submission" @tap="handleSubmit()" v-if="checkList.length===questionList.length&&questionList.length!==0">提交问卷</view>
		<view class="xieyi flex justify-center" v-if="checkList.length===questionList.length&&questionList.length!==0">
			<van-checkbox :value="checked" checked-color="#FF6A00" icon-size=10 @change="checked = !checked">
				<text class="text-black text-sm">我已同意</text>
				<text class="text-orange text-sm" @tap.stop="handleAgreement('agreement','tzsm')">《投资者申明》</text>
				<text class="text-orange text-sm" @tap.stop="handleAgreement('agreement','tzlx')">《投资者类型》</text>
			</van-checkbox>
		</view>
	</view>
</template>

<script>
	import QnCard from '@/components/uni-card/questionnaireCard.vue'
	export default {
		name: 'questionnaire',
		components: {
			QnCard
		},
		data() {
			return {
				loading: false,
				checked: false,
				questionList: [],
				checkList: [],
				percent: 0
			}
		},
		computed: {
			handleProgress() {
				this.percent = (this.checkList.length / this.questionList.length) * 100
				return this.percent
			}
		},
		methods: {
			handleChange(e) {
				this.checkList = e
			},
			//查看协议
			handleAgreement(routeName, type) {
				this.$mRouter.push({
					route: this.$mRoutesConfig[routeName],
					query: {
						type: type
					}
				})
			},
			//提交问卷
			handleSubmit() {
				let choseList = this.checkList.join("&")
				if (this.checkList.length !== this.questionList.length) {
					wx.showToast({
						title: "您还没有回答完问题哦",
						duration: 2000
					})
				} else {
					if (!this.checked) {
						wx.showToast({
							title: '同意并勾选协议',
							icon: "none",
						})
					} else {
						wx.showToast({
							title: "提交中",
							icon: "loading",
							success: () => {
								this.$apis.submitQuestionnaire({
									assess_key: choseList
								}).then((res) => {
									wx.showToast({
										title: res.msg,
										icon: "none"
									})
									setTimeout(() => {
										this.$mRouter.switchTab({
											route: this.$mRoutesConfig.person,
											query: {
												message: res.msg
											}
										})
									}, 1000)
								}).catch(err => {
									wx.showToast({
										title: err,
										icon: 'none'
									})
								})
							}
						})

					}
				}
			}
		},
		onLoad() {

		},
		onShow() {
			this.$apis.getQuestionnaire().then((res) => {
				this.questionList = res.list
			}).catch(err => {
				wx.showToast({
					title: err
				})
			})
		}
	}
</script>

<style scoped lang="scss">
	.questionnaire {
		width: 100%;

		.progress-box {
			width: 100%;
			height: 62rpx;
			padding: 0 30rpx 0 30rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.p-b-left {
				width: 100%;
			}

			.p-b-right {}
		}

		.submission {
			width: calc(100% - 60rpx);
			height: 88rpx;
			background: linear-gradient(90deg, rgba(237, 80, 60, 1) 0%, rgba(250, 166, 99, 1) 100%);
			box-shadow: 1rpx 9rpx 13rpx 0px rgba(241, 110, 74, 0.24);
			line-height: 88rpx;
			color: #ffffff;
			font-size: 32rpx;
			text-align: center;
			border-radius: 44rpx;
			margin: 60rpx 30rpx 0;
			/* box-shadow: 0 10rpx 3px #FFA921; */
		}

		.xieyi {
			margin: 41rpx auto;
		}

	}
</style>
